import { defineComponent, reactive, ref } from "vue";
import Popup from "@/components/Popup/Popup";
import { QuestionCircleFilled } from "@ant-design/icons-vue";
import styles from "./Add.module.less";
import { message } from "ant-design-vue";
import _ from "lodash";
import to from "await-to-js";
export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  emits: ["change"],
  setup(props, { expose, emit }) {
    const popupRef = ref(null as any);
    const state = reactive({
      type: "", //弹窗类型 add:添加 edit:编辑
      menuOptions: [] as any[], //上级菜单可选树
      parentId: 0, //上级菜单id
      menuId: null,
      menuType: "M",
      icon: null,
      menuName: null,
      orderNum: 0,
      isFrame: '1',
      path: null,
      visible: "0",
      isCache: "0",
      status: "0",
      component: null,
      perms: null,
      query: null,
    })
    const editing = ref(false);
    // 获取菜单选择数据
    const getTreeselect = async () => {
      const [err, res]: any = await to(props.service?.getTable());
      if (!err) {
        state.menuOptions = [];
        let menu: any = { menuId: 0, menuName: '主类目', children: [] };
        menu.children = res.data.data;
        state.menuOptions.push(menu);
      }
    }
    // 获取详情
    const getDetail = () => {
      const hide: any = message.loading('加载中...');
      props.service?.detail(state.menuId).then((res: any) => {
        state.parentId = res.data?.data?.parentId || 0;
        state.menuId = res.data?.data?.menuId || null;
        state.menuType = res.data?.data?.menuType || "M";
        state.icon = res.data?.data?.icon || null;
        state.menuName = res.data?.data?.menuName || null;
        state.orderNum = res.data?.data?.orderNum || 0;
        state.isFrame = res.data?.data?.isFrame || '1';
        state.path = res.data?.data?.path || null;
        state.visible = res.data?.data?.visible || "0";
        state.isCache = res.data?.data?.isCache || "0";
        state.status = res.data?.data?.status || "0";
        state.component = res.data?.data?.component || null;
        state.perms = res.data?.data?.perms || null;
        state.query = res.data?.data?.query || null;
      }).finally(() => {
        hide();
      })
    }
    // 打开弹窗
    const open = ({ type, parentId, menuId }) => {
      state.type = type;
      getTreeselect();
      parentId && (state.parentId = parentId);
      if (menuId) {
        state.menuId = menuId;
        getDetail();
      }
      popupRef.value.open();
    }
    // 添加提交
    const addConfirm = () => {
      editing.value = true;
      props.service?.add({
        parentId: state.parentId,
        menuType: state.menuType,
        icon: state.icon,
        menuName: state.menuName,
        orderNum: state.orderNum,
        isFrame: state.isFrame,
        path: state.path,
        component: state.component,
        perms: state.perms,
        query: state.query,
        isCache: state.isCache,
        visible: state.visible,
        status: state.status,
      }).then((res: any) => {
        message.success('添加成功');
        emit('change');
        popupRef.value.close();
      }).finally(() => {
        editing.value = false;
      })
    }
    // 编辑提交
    const editConfirm = () => {
      editing.value = true;
      props.service?.edit({
        menuId: state.menuId,
        parentId: state.parentId,
        menuType: state.menuType,
        icon: state.icon,
        menuName: state.menuName,
        orderNum: state.orderNum,
        isFrame: state.isFrame,
        path: state.path,
        component: state.component,
        perms: state.perms,
        query: state.query,
        isCache: state.isCache,
        visible: state.visible,
        status: state.status,
      }).then((res: any) => {
        message.success('编辑成功');
        emit('change');
        popupRef.value.close();
      }).finally(() => {
        editing.value = false;
      })
    }
    //点击保存
    const save = _.debounce(() => {
      state.type === "edit" ? editConfirm() : addConfirm();
    }, 500, { leading: true, trailing: false });
    expose({
      open,
    })
    return () => (
      <Popup
        ref={popupRef}
        title={state.type === 'edit' ? "编辑菜单" : "添加菜单"}
        width="680px"
        oriState={state}
        v-slots={{
          footer: () => <>
            <a-button type="primary" loading={editing.value} onClick={() => { save() }}>确定</a-button>
            <a-button onClick={() => { popupRef.value.close() }}>取消</a-button>
          </>
        }}
      >
        <div class={styles.content}>
          <div class={styles.row}>
            <div class={styles.label}>上级菜单:</div>
            <div class={styles.value}>
              <a-tree-select
                style={{ width: "100%" }}
                placeholder="请选择上级菜单，不选即为顶级菜单"
                fieldNames={{ children: 'children', label: 'menuName', value: 'menuId' }}
                allowClear={true}
                tree-data={state.menuOptions}
                treeDefaultExpandedKeys={[state.parentId]}
                v-model:value={state.parentId}
              ></a-tree-select>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.label}>菜单类型:</div>
            <div class={styles.value}>
              <a-radio-group
                v-model:value={state.menuType}
                name="radioGroup"
              >
                <a-radio value="M">目录</a-radio>
                <a-radio value="C">菜单</a-radio>
                <a-radio value="F">按钮</a-radio>
              </a-radio-group>
            </div>
          </div>
          {
            state.menuType !== 'F' && (
              <div class={styles.row}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>菜单图标svg名称，与前端项目内src/assets/icons内的svg文件名对应</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  图标名称:
                </div>
                <div class={styles.value}>
                  <a-input
                    v-model:value={state.icon}
                    placeholder="请输入菜单图标svg名"
                  ></a-input>
                </div>
              </div>
            )
          }
          <div class={[styles.row, styles.rowHalf]}>
            <div class={styles.label}>菜单名称:</div>
            <div class={styles.value}>
              <a-input
                v-model:value={state.menuName}
                placeholder="请输入菜单名称"
              ></a-input>
            </div>
          </div>
          <div class={[styles.row, styles.rowHalf]}>
            <div class={styles.label}>显示排序:</div>
            <div class={styles.value}>
              <a-input-number v-model:value={state.orderNum} min={0} style={{ width: "100%" }} />
            </div>
          </div>
          {
            state.menuType !== 'F' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>选择是外链则路由地址需要以`http(s)://`开头</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  是否外链:
                </div>
                <div class={styles.value}>
                  <a-radio-group
                    v-model:value={state.isFrame}
                    name="radioGroup"
                  >
                    <a-radio value="0">是</a-radio>
                    <a-radio value="1">否</a-radio>
                  </a-radio-group>
                </div>
              </div>
            )
          }
          {
            state.menuType !== 'F' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  路由地址:
                </div>
                <div class={styles.value}>
                  <a-input
                    v-model:value={state.path}
                    placeholder="请输入路由地址"
                  ></a-input>
                </div>
              </div>
            )
          }
          {
            state.menuType === 'C' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>访问的组件路径，如：`system/user/index`，默认在`views`目录下</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  组件路径:
                </div>
                <div class={styles.value}>
                  <a-input
                    v-model:value={state.component}
                    placeholder="请输入组件路径"
                  ></a-input>
                </div>
              </div>
            )
          }
          {
            state.menuType !== 'M' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>控制器中定义的权限字符,多个权限;分割</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  权限字符:
                </div>
                <div class={styles.value}>
                  <a-input
                    v-model:value={state.perms}
                    placeholder="请输入权限字符"
                  ></a-input>
                </div>
              </div>
            )
          }
          {
            state.menuType === 'C' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>访问路由的默认传递参数，如：`{`{`}"id": 1, "name": "ry"{`}`}`</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  路由参数:
                </div>
                <div class={styles.value}>
                  <a-input
                    v-model:value={state.query}
                    placeholder="请输入路由参数"
                  ></a-input>
                </div>
              </div>
            )
          }
          {
            state.menuType === 'C' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  是否缓存:
                </div>
                <div class={styles.value}>
                  <a-radio-group
                    v-model:value={state.isCache}
                    name="radioGroup"
                  >
                    <a-radio value="0">缓存</a-radio>
                    <a-radio value="1">不缓存</a-radio>
                  </a-radio-group>
                </div>
              </div>
            )
          }
          {
            state.menuType !== 'F' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>选择隐藏则路由将不会出现在侧边栏，但仍然可以访问</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  显示状态:
                </div>
                <div class={styles.value}>
                  <a-radio-group
                    v-model:value={state.visible}
                    name="radioGroup"
                  >
                    <a-radio value={"0"}>显示</a-radio>
                    <a-radio value={"1"}>隐藏</a-radio>
                  </a-radio-group>
                </div>
              </div>
            )
          }
          <div class={[styles.row, styles.rowHalf]}>
            <div class={styles.label}>
              <a-tooltip placement="top" v-slots={{
                title: () => (
                  <span class={styles.tooltip}>选择停用则路由将不会出现在侧边栏，也不能被访问</span>
                )
              }}>
                <QuestionCircleFilled class={styles.infoIcon} />
              </a-tooltip>
              菜单状态:
            </div>
            <div class={styles.value}>
              <a-radio-group
                v-model:value={state.status}
                name="radioGroup"
              >
                <a-radio value={"0"}>正常</a-radio>
                <a-radio value={"1"}>停用</a-radio>
              </a-radio-group>
            </div>
          </div>
        </div>
      </Popup>
    )
  }
})